<template>
	<view class="cocmTopic-wrap" v-if="inquiry">
		<view class="cocmTopic-container">
			<view class="cocmTopic-habitus">{{ cocmDetail.name }}</view>
			<view class="cocmTopic-tip">{{ cocmDetail.totalTrait }}</view>

			<view class="cocmTopic-item">
				<view class="cocmTopic-title">{{ topicIndex + 1 }}.{{ topicList[topicIndex].title }}</view>

				<image class="cocmTopic-pic" :src="topicList[topicIndex].pictureUrl" mode="aspectFill"></image>
			</view>

			<view class="cocmTopic-option-list">
				<radio-group @change="radioChange">
					<label class="cocmTopic-option-cell" v-for="(item, index) in optionList" :key="index">
						<view><radio color="#2979ff" :value="item.value" :checked="topicList[topicIndex].value == item.value" /></view>
						<view>{{ item.name }}</view>
					</label>
				</radio-group>
			</view>

			<div class="inquiry-bottom">
				<div class="inquiry-btn" @click="previousItem" v-if="topicIndex != 0">上一题</div>
				<div class="inquiry-btn" @click="nextItem" v-if="topicList.length > topicIndex + 1">下一题</div>
				<div class="inquiry-btn" @click="gotoResult" v-else>提交问卷</div>
			</div>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			topicList: [],
			topicIndex: 0,
			cocmDetail: [],
			optionList: [
				{
					name: '没有（根本不）',
					value: 1
				},
				{
					name: '很少（有一点）',
					value: 2
				},
				{
					name: '有时（有些）',
					value: 3
				},
				{
					name: '经常（相当）',
					value: 4
				},
				{
					name: '总是（非常）',
					value: 5
				}
			]
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.queryCocmTopicList();
		this.queryCocmDetail();
	},
	methods: {
		//查询题目
		queryCocmTopicList() {
			this.$api
				.queryCocmTopicList({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200 && res.result) {
						this.topicList = res.result;
						this.topicList.forEach(item => {
							item.value = 1;
						});
					}
				});
		},

		//选择选项
		radioChange(e) {
			this.topicList[this.topicIndex].value = e.detail.value;
		},

		//下一题
		nextItem() {
			if (this.topicList[this.topicIndex].value) {
				this.topicIndex++;
			} else {
				uni.showToast({
					title: '请先选择',
					icon: 'none'
				});
			}
		},
		//上一题
		previousItem() {
			this.topicIndex--;
		},

		//查询详情
		queryCocmDetail() {
			this.$api
				.queryCocmDetail({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200 && res.result) {
						this.cocmDetail = res.result;
					}
				});
		},

		//计算结果并跳转
		gotoResult() {
			console.log(this.topicList);

			if (!this.checkData()) {
				return;
			}

			let total = 0;
			this.topicList.forEach(key => {
				if (key.topicType == 0) {
					total += parseInt(key.value);
				} else {
					total += 6 - key.value;
				}
			});
			console.log('原始分：' + total);
			let length = this.topicList.length;

			let score = [(total - length) / (length * 4)] * 100;

			console.log('转化分：' + score);

			uni.showLoading({
				title: '计算中...'
			});
			

			let timer = setTimeout(() => {
				clearTimeout(timer);
				uni.hideLoading();

				this.gotoRouter('/pages-client/cocm/cocmResult?id=' + this.id + '&score=' + score);
			}, 2000);
			//直接上传体质结果（需要计算结果的倾向同步上传计算结果）
			// uploadCocmResult() {
			// 	this.$api
			// 		.uploadCocmResult({
			// 			params: {
			// 				id: this.id,
			// 				result: this.result,
			// 				score: score
			// 			}
			// 		})
			// 		.then(res => {
			// 			if (res.code == 200 && res.result) {
			// 				console.log('上传成功');
			// 			}
			// 		});
			// },
			
		},
		//校验数据
		checkData() {
			let b = true;
			this.topicList.forEach(key => {
				if (!key.value) {
					b = false;
				}
			});
			if (!b) {
				uni.showToast({
					title: '有题目未选择',
					icon: 'none'
				});
			}
			return b;
		}
	}
};
</script>

<style lang="less">
page {
	padding: 0;
	background-color: #fff;
}

.cocmTopic-wrap {
	width: 750rpx;
	min-height: 100vh;
	box-sizing: border-box;

	.cocmTopic-container {
		background-color: #fff;
		min-height: 94vh;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 30rpx;
		.cocmTopic-habitus {
			background-color: #8c5e5b;
			width: 280rpx;
			height: 80rpx;
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 24rpx;
		}
		.cocmTopic-tip {
			color: #969799;
			font-size: 28rpx;
			text-align: center;
			margin-bottom: 28rpx;
		}


		.cocmTopic-item {
			margin-bottom: 24rpx;
			.cocmTopic-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}
			.cocmTopic-pic {
				width: 640rpx;
			}
		}

		.cocmTopic-option-list {
			.cocmTopic-option-cell {
				display: flex;
				margin-bottom: 20rpx;
			}
		}

		.inquiry-bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #f5f5f5;
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			justify-content: space-around;
			color: #764c4b;
			font-size: 30rpx;
			border-radius: 30rpx;
			
			.inquiry-btn{
				flex: 1;
				text-align: center;
			}
		}
	}
}
</style>
